/*背景渐变
@start  渐变开始颜色
@end  结束颜色
*/
.bg(@start :#00ffff,@end :#9fffff){
    background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
    background:-moz-linear-gradient(top,@start ,@end);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,
    endColorstr=@end ,grandientType=0);
}

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}


.bgImg(@imgUrl,@rest...){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    background-image: url(@imgUrl);
    background-repeat: no-repeat;
    background-size: 100%;
    width: @imgW;
    height: @imgH;
}
.bgImg(@imgUrl,h){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    position: absolute;
    left: 50%;
    margin-left: -@imgW/2;
}
.bgImg(@imgUrl,v){
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    position: absolute;
    top: 50%;
    margin-top: -@imgH/2;
}
.bgImg(@imgUrl,hv){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    position: absolute;
    top: 50%;
    margin-top: -@imgH/2;
    left: 50%;
    margin-left: -@imgW/2;
}


.bgSprite(h){
    position: absolute;
    left: 50%;
    margin-left: -@width/2;
}
.bgSprite(v){
    position: absolute;
    top: 50%;
    margin-top: -@height/2;
}
.bgSprite(hv){
    position: absolute;
    top: 50%;
    margin-top: -@height/2;
    left: 50%;
    margin-left: -@width/2;
}
.stitches-sprite(@_x: 0, @_y: 0, @_width: 0, @_height: 0) {
    @width:@_width;
    @height:@_height;
    background-position: @_x @_y;
    width: @width;
    height: @height;
}
.sprite(@imgUrl) {
    @URL: @imgUrl;
    @W: unit(image-width(@URL),rem)*@divisorPx;
    @H: unit(image-height(@URL),rem)*@divisorPx;
    background-image: url(@URL);
    background-repeat: no-repeat;
    background-size: @W @H;
}
.origin(@x,@y) {
    transform-origin: @x @y;
}
.rotate(@deg) {
    transform: rotate(@deg);
}
.skew(@degX,@degY) {
    transform: skew(@degX,@degY);
}
.translate(@x,@y) {
    transform: translate(@x, @y);
}
.scale(@x,@y) {
    transform: scale(@x, @y);
}
.matrix(@a,@b,@c,@d,@e,@f) {
    transform: matrix(@a,@b,@c,@d,@e,@f);
}
.duration(@second){
    animation-duration:@second;
}
.delay(@second){
    animation-delay:@second;
}

.hidden{
    display: none!important;
}
.abs{
    position: absolute;
}

.arrow-up(@borderWidth, @color) {
    width:0;
    height:0;
    border-left:@borderWidth solid transparent;
    border-right:@borderWidth solid transparent;
    border-bottom:@borderWidth solid @color;
}

/*箭头向下*/
.arrow-down(@borderWidth, @color) {
    width:0;
    height:0;
    border-left:@borderWidth solid transparent;
    border-right:@borderWidth solid transparent;
    border-top:@borderWidth solid @color;
}

/*箭头向左*/
.arrow-left(@borderWidth, @color) {
    width:0;
    height:0;
    border-top:@borderWidth solid transparent;
    border-bottom:@borderWidth solid transparent;
    border-right:@borderWidth solid @color;
}

/*箭头向右*/
.arrow-right(@borderWidth, @color) {
    width:0;
    height:0;
    border-top:@borderWidth solid transparent;
    border-bottom: @borderWidth solid transparent;
    border-left: @borderWidth solid @color;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.resp-img{
    display: block;
    max-width:100%;
}

/* 竖屏引导层 */
.mask{
    position:absolute;
    background-color:rgba(0,0,0,0.8);
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:999;
    .lock{
        color:#FFFFFF;
        font-size: 24rem*@divisorPx;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .lock-txt{
            //margin-top:20rem*@divisorPx;
            text-align: center;
            width: 100%;
            white-space: nowrap;
            font-size: 20rem *@divisorPx;
        }
        .lock-bg{
            width:45rem*@divisorPx;
            height:90rem*@divisorPx;
            background:url("") 0 0 no-repeat;
            background-size:45rem*@divisorPx auto;
            animation:lock 3s infinite 1.5s linear;
            transform:rotate(90deg);
            display: inline-block;
        }
    }
}
@keyframes lock{
    0%{transform:rotate(90deg);}
    20%{transform:translate(0);}
    80%{transform:translate(0);}
    100%{transform:translate(90deg);}
}
@media screen and (orientation:portrait){
    .mask{display:none!important;}
}
/* 竖屏引导层 */